<template>
    <div>
        <van-field v-model="info.name" required clearable label="用户名" placeholder="请输入用户名"/>
        <van-field v-model="info.pwd" type="password" label="密码" placeholder="请输入密码" required/>
        <van-field v-model="info.phone" type="number" label="手机号" placeholder="请输入手机号"/>
        <verify-code :tel="info.phone" :type="1" @codeValue="codeValue"></verify-code>
        <div class="btn-box">
            <van-button class="btn" size="large" @click.native="submit">重置密码</van-button>
        </div>
        <div class="flex-row handle-btns plr15">
            <span @click="$router.push({name:'register'})">注册</span>
        </div>
    </div>
</template>

<script>
    import verifyCode from "../../components/VerificationCode"
    import md5 from "js-md5"

    export default {
        data() {
            return {
                info: {
                    name: '',
                    pwd: '',
                    phone: '',
                    code: ''
                }
            }
        },
        components: {verifyCode},
        methods: {
            codeValue(val) {
                this.info.code = val
            },
            submit() {
                console.log(this.info)
                if (this.info.name == '') return this.fail('用户名不能为空')
                if (this.info.pwd == '') return this.fail('密码不能为空')
                if (this.info.pwd.length < 6 && this.info.pwd.length > 18) return this.fail('请输入6-18位密码')
                if (this.info.phone == '') return this.fail('手机不能为空')
                if (this.validatePhone(this.info.phone)) return this.fail('请输入正确的手机号码')
                if (this.info.code == '') return this.fail('验证码不能为空')
                this.$store.dispatch(types.USER_FIND_PASSWORD, {
                    name: this.info.name,
                    pwd: md5(this.info.pwd),
                    phone: this.info.phone,
                    code: this.info.code
                }).then(res => {
                    console.log(res)
                    if (res.code !== 0) return this.fail(res.msg)
                    this.success('重置密码成功')
                    this.$router.go(-1)
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .handle-btns {
        justify-content: flex-end;
        height: 30px;
        span {
            color: #666;
            &:first-child {
                padding-right: 10px;
            }
        }
    }
</style>